<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">

    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    <style type="text/css">
        .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
            padding: 4px 2px;
            font-size:10px;
            vertical-align: middle; 
        }
    </style>
    <meta charset="UTF-8">
    <title>简历数据看板</title>
</head>
<body>
<div class="container-fluid">

    
      <div class="datacontent" id="qsContent">
        <div class="dataTit">
            <i class="mark"></i><span>简历数量供应</span>
        </div>
        <div class="dataShow">
            <div id='Quantity_provision_Option' dateGrp='stat_date'>
                <form class="form-inline">

                    <label for="beginDate">时间: </label>
                    <div class="form-group input-group input-group-sm" style="width: 10%;">
                        <input id="beginDate" type="text"  class="form-control input-sm time" placeholder="选择时间" value="$!maxDate"/>
                    </div>
                    
                    <div class="form-group" style="width:160px;margin-left:10px">
                        <label for="city_quantity_option">城市：</label>
                        <select id="city_quantity_option" class="form-control input-sm" style="align:center; width:100px; ">
                        <!-- <option value="全国">全国</option>
                        <option value="直销">直销城市</option> -->
                        #foreach($!{p} in ${CityList})
                                <option value="$!{p}">$!{p}</option>
                        #end  
                        </select>
                    </div> 
           

                    <div class="form-group" style="width:180px;margin-left:10px">
                        <label for="cate_quantity_option">类别：</label>
                        <select id="cate_quantity_option" class="form-control input-sm" style="align:center; width:130px; ">
                         <!--    <option value="all">总体</option>
                            <option value="全职招聘">全职招聘</option>
                            <option value="兼职招聘">兼职招聘</option> -->
                            #foreach($!{p} in ${CateList})
                                <option value="$!{p}">$!{p}</option>
                            #end
                        </select>                     
                    </div>

                    <button id="refresh_quantity_chord_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>  

                      <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btn_quantityProvision" dateGrp='stat_date' statType='day'>日</button>
                        <button type="button" class="btn btn-default btn_quantityProvision" dateGrp='week_begin' statType='week'>周</button>                       
                    </div>

                </form>           
            </div>          
            
            <div class="row" style=>
                <div id="quantity_chord_source"  style="height:350px"></div>
        
            </div>
            
            <div class="row" style="height:50px">
            </div>
        </div>
    </div>     



    <div class="datacontent" id="qsContent">
        <div class="dataTit">
            <i class="mark"></i><span>简历质量匹配</span>
        </div>

        <div class="dataShow">
            <div id='qualityLineOption' dateGrp='stat_date' statType='day' indexType='全国'>
                <form class="form-inline">
                    <div class="form-group" style="width:130px;">
                        <label for="city_quality">城市：</label>
                        <select id="city_quality" class="form-control input-sm" style="width:80px; ">
                            #foreach($c in $zhixiaoCityList)
                                 <option value="$c">$c</option>
                            #end
                        </select>
                    </div>

                    <div class="form-group" style="width:160px;">
                        <label for="cate_quality">类别：</label>
                        <select id="cate_quality" class="form-control  input-sm" style="width:110px; ">
                            <option value="常规招聘">常规招聘</option>              
                            #foreach($!{cate} in ${cateTwoList})
                                <option value="$!{cate}">
                                    $!{cate}
                                </option>
                            #end
                        </select>
                    </div>

                   <div class="form-group" style="width:140px;">
                        <label for="education_quality">学历：</label>
                        <select id="education_quality" class="form-control  input-sm" style="width:90px; ">
                            #foreach($!{val} in $!{resumeCrowdMap.get("education")})
                                <option value="$!{val}">$!{val}</option>
                            #end
                        </select>
                    </div>

                    <div class="form-group" style="width:160px;">
                        <label for="salary_quality">薪资：</label>
                        <select id="salary_quality" class="form-control  input-sm" style="width:110px; ">
                            #foreach($!{val} in $!{resumeCrowdMap.get("salary")})
                                <option value="$!{val}">$!{val}</option>
                            #end
                        </select>
                    </div>

                    <div class="form-group" style="width:170px; ">
                        <label for="workYears_quality">工作经验：</label>
                        <select id="workYears_quality" class="form-control  input-sm" style="width:90px; ">
                            #foreach($!{val} in $!{resumeCrowdMap.get("work_years")})
                                <option value="$!{val}">$!{val}</option>
                            #end
                        </select>
                    </div>

                    <button id="refresh_quality_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btn_qualityLine" dateGrp='stat_date' statType='day'>日</button>
                        <button type="button" class="btn btn-default btn_qualityLine" dateGrp='week_begin' statType='week'>周</button>
                        <button type="button" class="btn btn-default btn_qualityLine" dateGrp='month_num' statType='month'>月</button>
                    </div>
                </form>
            </div>

            <div id="tip_quality" class="row" style="height:380px; width:100%; display:none; ">
                <div  style="display:table-cell; text-align:center; vertical-align:middle;">
                    <h3>没有符合此条件的数据, 请更换条件并点击刷新按钮</h3>
                </div>
            </div>

            <div id="show_quality">
                <div id="quality_line" style="height:300px;"></div>
                <div id="quality_radar"  style="height:250px;"></div>
            </div>

         </div><!-- dataShow  -->
    </div> <!-- datacontent  -->


    <div class="datacontent" id="qsContent">
        <div class="dataTit">
            <i class="mark"></i><span>外部人才流入</span>
        </div>

        <div class="dataShow">
            <div id='talentinflowOption' dateGrp='stat_date' statType='day' indexType='全国'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_TalentinflowPro" type="checkbox">
                            </span>
                            <input id="time_input_TalentinflowPro" type="text" class="form-control time" placeholder="选择时间" disabled>
                        </div>
                        <div class="form-group" style="width:150px; margin-left: 10%;">
                        <label for="city_talentinflow">城市：</label>
                        <select id="city_talentinflow" class="form-control input-sm" style="width:100px; ">
                            #foreach($c in $zhixiaoCityList1)
                                 <option value="$c">$c</option>
                            #end
                        </select>
                        </div>
                         <div class="form-group" style="width:150px; margin-left:5px">
                        <label for="cate_talentinflow">类别：</label>
                        <select id="cate_talentinflow" class="form-control  input-sm" style="width:100px; ">            
                            #foreach($!{cate} in ${cateTwoList1})
                                <option value="$!{cate}">
                                    $!{cate}
                                </option>
                            #end
                        </select>
                       </div>
                        <button id="refresh_talentinflow_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                       <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btn_talentinflow" dateGrp='stat_date' statType='day'>日</button>
                        <button type="button" class="btn btn-default btn_talentinflow" dateGrp='week_begin' statType='week'>周</button>
                        <button type="button" class="btn btn-default btn_talentinflow" dateGrp='month_num' statType='month'>月</button>
                    </div>
                </form>
            </div>

            <div>
                <div id="talent_inflow" style="height:500px;"></div>
            </div>
         </div><!-- dataShow  -->
    </div> <!-- datacontent  -->


  
</div>
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>

<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
    var businessName = "$!{businessName}";
    var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
    var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
        orientation: "top left"
    };

    function getDate(yyyymmdd){
        if(yyyymmdd.length==10){        //yyyy-MM-dd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
        }else if(yyyymmdd.length==8){   //yyyyMMdd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
        }else if(yyyymmdd.length==6){    //yyyyMM
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
        }
    }

    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

    function setDatePicker(ec,dateGrp,input){
        if('week_begin'==dateGrp){
        }else if('month_num'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyy-mm';
        }else{
            datepicker_op.minViewMode=0; 
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }


    //格式化输出数字
    function format_number(n){
        var b=parseInt(n).toString(); 
        var len=b.length; 
        if(len<=3){return b;} 
        var r=len%3; 
        return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); 
    };

    //加百分号和样式
    function getRate(floatNum){
         var s=parseFloat(floatNum).toFixed(1)+"%";
         if(floatNum > 0){
            return '<td class="text-danger">' + s + '<i class="upi"></i></td>';
         }else if(floatNum < 0){
             return '<td class="text-success">' + s + '<i class="downi"></i></td>';
         }else{
            return '<td>' + s + '</td>';
         }
    }  

    //格式化输出数字
    function formatNum(n){
        if((n).toString().indexOf(".")>=0){
            return  parsrFloat(n).toFixed(2);
        }else{
            return n;
        }
    };

    function changeDateGrp(item){
        var dateGrpVal = $(item).attr('dateGrp');
        var stat_type = $(item).attr('statType');
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal).attr('statType',stat_type);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });



    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/resume"}});
    
    var charts = [];

    //简历质量匹配
    require(['dashboard/quality_line_v0'],function(ec){
        charts.push(ec);
        ec.show("",2);
    });


    /*  人才流入模块  */
    require(['dashboard/talent_inflow'],function(customerProEC){
        charts.push(customerProEC);
        customerProEC.show(2);
    });


     //简历数量供应  
    require(['dashboard/resume_quantity'],function(totalEC){
        charts.push(totalEC);
        totalEC.showChord();
    });


</script>
</html>